
<template>
<div class="population-density-main">

  <div class="map-data-menu">
    <el-menu
        router
        default-active="populationSize"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
    >
      <el-menu-item index="populationSize">
        <el-icon><UserFilled /></el-icon>
        <span>人口数量</span>
      </el-menu-item>
      <el-menu-item index="populationDensity">
        <el-icon><Grid /></el-icon>
        <span>人口密度</span>
      </el-menu-item>
      <el-menu-item index="urbanization">
        <el-icon><OfficeBuilding /></el-icon>
        <span>城镇化程度</span>
      </el-menu-item>
    </el-menu>
  </div>
  <div class="map-data-main">
    <RouterView></RouterView>
  </div>
</div>
</template>

<style scoped>
.population-density-main{
  display: flex;
  width: 100%;
  height: 80vh;
  justify-content: space-between;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 100%;

}
.map-data-menu{
  width: 13.2%;
  height: 100%;

}

.map-data-main{
  width: 86%;
  height: 100%;
}

</style>

<script setup>

import {
  Document,
  Menu as IconMenu,
  Location,
  Setting, UserFilled, OfficeBuilding, Grid, Promotion,
} from '@element-plus/icons-vue'
import * as echarts from "echarts";
import {useRoute,useRouter,RouterView} from 'vue-router'
import {ElLoading} from "element-plus";
import {ref} from "vue";

let router = useRouter()


const handleOpen = (key, keyPath) => {

  router.push(key)

}
const handleClose = (key, keyPath) => {
  console.log(key, keyPath)
}
</script>
